<template>
  <div class="page">
    <h4>基本信息</h4>
    <Row>
      <i-col span="6">
        <span class="label-span">保单号：</span> <span>{{form.contNo}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">保单状态：</span> <span>{{form.contState}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">交费频率：</span> <span>{{form.payintv}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">期交保费：</span> <span>{{form.oncePremium}}</span>
      </i-col>
    </Row>
    <Row>
      <i-col span="6">
        <span class="label-span">应交交次：</span> <span>{{form.payYear}}/{{form.payYears}}年交</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">累计已交保费：</span> <span>{{form.sumPremium}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">首期交费方式：</span> <span>{{form.payMode}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">保单承保日期：</span> <span>{{form.applyDate}}</span>
      </i-col>
    </Row>
    <Row>
      <i-col span="6">
        <span class="label-span">保单生效日期：</span> <span>{{form.cvaliDate}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">最后一次交费日期：</span> <span>{{form.enterAccDate}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">保单回访成功日期：</span> <span>{{form.callBackDate}}</span>
      </i-col>
      <i-col span="6">
        <span class="label-span">保单回执签收日期：</span> <span>{{form.customGetPolDate}}</span>
      </i-col>
    </Row>
    <Row>
      <i-col span="6">
        <span class="label-span">退保试算：</span> <span class="show-span" @click="showBaseModal">查看</span>
      </i-col>
    </Row>

    <h4 style="margin:20px 0">险种信息</h4>
    <div :key="form.riskInfo && form.riskInfo.length || 1">
      <div v-for="(item, index) in form.riskInfo" :key="index">
        <h5>【{{item.subRiskFlag == 'M' ? '主险' : '附加险'}}】</h5>
        <Row>
          <i-col span="6">
            <span class="label-span">险种保险费：</span> <span>{{item.riskPrem}}</span>
          </i-col>
          <i-col span="6">
            <span class="label-span">险种代码：</span> <span>{{item.riskCode}}</span>
          </i-col>
          <i-col span="6">
            <span class="label-span">险种名称：</span> <span>{{item.riskName}}</span>
          </i-col>
          <i-col span="6">
            <span class="label-span">险种生效日：</span> <span>{{item.riskCvaliDate}}</span>
          </i-col>
        </Row>
        <Row>
          <i-col span="6">
            <!-- <span class="label-span">保险期间：</span> <span>至80周岁</span> -->
            <span class="label-span">保险期间：</span> <span>{{item.policyTerm}}</span>
          </i-col>
          <i-col span="6">
            <!-- <span class="label-span">交费期间：</span> <span>20年</span> -->
            <span class="label-span">交费期间：</span> <span>{{item.payYears}}年</span>
          </i-col>
          <i-col span="6">
            <span class="label-span">保险金额：</span> <span>{{item.insuredAmount}}</span>
          </i-col>
        </Row>
      </div>
    </div>

    <Modal title="退保试算" v-model="baseModal" width="400" footer-hide>
      <div class="modal-div">
        <span class="label-span">保单价值：</span>
        <span>{{modalForm.cashValue}}</span>
      </div>

      <div class="modal-div">
        <span class="label-span">当前时点保单现价（实退金额）：</span>
        <span>{{modalForm.subPolBackFee}}</span>
      </div>
      <div class="modal-div">
        <span class="label-span">手续费：</span>
        <span>{{modalForm.otherDeduct}}</span>
      </div>
      <div class="modal-div">
        <span class="label-span">累计交纳保费：</span>
        <span>{{modalForm.sumPrem}}</span>
      </div>
      <div class="modal-div">
        <span class="label-span">累计保额：</span>
        <span>{{modalForm.sumAmnt}}</span>
      </div>
      <div class="modal-div">
        <span class="label-span">交费期数：</span>
        <span>{{modalForm.payCount}}</span>
      </div>
      <div class="modal-div">
        <span class="label-span">生存金账户价值：</span>
        <span>{{modalForm.liveInsuaccMoney}}</span>
      </div>
      <div class="modal-div">
        <span class="label-span">红利账户价值：</span>
        <span>{{modalForm.bonusInsuaccMoney}}</span>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "baseInfo",
  props: {
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      baseModal: false,
      modalForm: {},
    };
  },
  methods: {
    showBaseModal() {
      this.api
        .selectSurrenderValue({ contNo: this.$route.query.contNo })
        .then((res) => {
          if (res.code == 200) {
            this.$set(this, "modalForm", res.data[0]);
            this.baseModal = true;
          } else this.$Message.info(res.msg);
        });
    },
  },
};
</script>
<style scoped>
.label-span {
  color: #1d1d1d !important;
}
.page >>> .ivu-row {
  margin-top: 20px;
}
/* .page >>> span {
  color: #999;
} */
.show-span {
  color: #ff4722 !important;
}
.modal-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
</style>